import Taro, { Component } from '@tarojs/taro'
import { AtSearchBar, AtTag } from "taro-ui"
import { View, Text, ScrollView } from '@tarojs/components'
import { ItemList } from '@components'
import { connect } from '@tarojs/redux'
import { getWindowHeight } from '@utils/style'
import * as actions from '@actions/item'
import classNames from 'classnames'
import './search.scss'

const PAGE_SIZE = 20

@connect(state => state.item, actions)
class Search extends Component {
  config = {
    navigationBarTitleText: '搜索'
  }

  constructor (props) {
    super(props)
    this.state = {
      status: 0,
      value: '',
      actionName: '取消',
      orderBy: '',
      direction: '',
      hot: []
    }
  }

  componentWillMount() {
  }

  componentDidMount() {
    let hot = []
    this.props.dispatchItemSearchHot().then(res => {
      hot = res
      this.setState({
        hot: hot
      })
    })
  }

  onChange (value) {
    let actionName = '取消'
    if (value) {
      actionName = '搜索'
    }
    this.setState({
      value: value,
      actionName: actionName
    })
  }

  onClear () {
    if (this.state.status == 1) {
      this.setState({
        value: '',
        status: 0
      })
    } else {
      this.setState({
        value: ''
      })
    }
  }

  onActionClick () {
    let { actionName, value, orderBy, direction} = this.state
    if (actionName === '取消') {
      if (this.props.list) {
        this.setState({
          status: 1
        })
      } else {
        Taro.navigateBack({ delta: 1 })
        if (process.env.TARO_ENV === 'rn') {
          setTimeout(() => Taro.navigateBack(), 1000)
        }
      }
    } else {
      this.onSearch(value, 1, orderBy, direction)
    }
  }

  handleClickBtn = (value) => {
    if (!value) {
      return
    }

    let { orderBy, direction} = this.state
    let change = false

    if (value === 'price') {
      direction = (direction === 'asc') ? 'desc' : 'asc'
      change = true
    } else {
      direction = ''
      if (orderBy != value) {
        change = true
      }
    }
    if (change) {
      this.setState({
        orderBy: value,
        direction: direction
      })
      this.onSearch(this.state.value, 1, value, direction)
    }
  }

  onClickTag = (tag) => {
    const { orderBy, direction} = this.state
    const value = tag['item']
    this.setState({
      value: value
    })
    this.onSearch(value, 1, orderBy, direction)
  }

  onSearch = (wd, page, orderBy, direction) => {
    const sort = orderBy === '' ? '' : "sellingPrice," + direction
    const payload = {
      wd: wd,
      page: page,
      size: PAGE_SIZE,
      sort: sort
    }
    this.props.dispatchItemSearch(payload).then((res) => {
      if (res.list && res.list.length) {
        this.setState({
          status: 1
        })
      } else {
        if (page == 1 ) {
          Taro.showToast({
            title: '您查询的商品还未上架',
            icon: 'none'
          })
        }
      }
    })
  }

  render () {
    const { status, value, actionName, orderBy, direction, hot } = this.state
    const { searchInfo } = this.props
    const { list, page } = searchInfo
  	return (
  	  <View className='search'>
        <AtSearchBar
          showActionButton
          actionName={actionName}
          value={value}
          placeholder='请输入'
          onChange={this.onChange.bind(this)}
          onActionClick={this.onActionClick.bind(this)}
          onClear={this.onClear.bind(this)}
        />
        <View className='search-border' />
        <View className='search__content'>
          {
            status === 0 &&
            <View className='search__content-warp'>
            {
              hot && hot.length > 0 &&
              <View className='search__history'>
                <View className='search__history-header'>
                  <Text className='search__history-header-txt'>热门搜索</Text>
                </View>
                <View className='search__history-tags'>
                  {hot.map((item, index) =>
                    ( <AtTag key={index} className='search__history-tag' size='small' onClick={this.onClickTag.bind(this, {item})}>{item}</AtTag> )
                  )}
                </View>
              </View>
            }
            </View>
          }

          {
            status === 1 &&
            <View className='search__content-info'>
              <View className='search__bar'>
                <View className='search__bar-btn' onClick={this.handleClickBtn.bind(this, '')}>
                  <View className={classNames('search__bar-btn-txt', {'search__bar-btn-active' : orderBy === ''} )}>综合</View>
                </View>
                <View className='search__bar-btn' onClick={this.handleClickBtn.bind(this, 'price')}>
                  <View className={classNames('search__bar-btn-txt', {'search__bar-btn-active' : orderBy === 'price'} )}>价格</View>
                  <View className='search__bar-btn-icon'>
                    <View className={classNames('search__bar-btn-icon-chevron at-icon at-icon-chevron-up', {'search__bar-btn-active' : orderBy === 'price' && direction === 'asc'})} ></View>
                    <View className={classNames('search__bar-btn-icon-chevron at-icon at-icon-chevron-down', {'search__bar-btn-active' : orderBy === 'price' && direction === 'desc'})} ></View>
                  </View>
                </View>
              </View>
              <ScrollView
                scrollY
                className='search__content-wrap'
                onScrollToLower={this.onSearch.bind(this, value, page, orderBy, direction)}
                style={{ height: getWindowHeight() }}
              >
                <ItemList list={list} showTitle={false} columnNum={2} >
                </ItemList>
              </ScrollView>
            </View>
          }
        </View>
  	  </View>
  	)
  }
}

export default Search
